<template>
  <el-dialog v-el-drag-dialog title="播放器" :visible.sync="visible" :append-to-body="appendToBody">
    <el-row :gutter="10" class="m-b-10">
      <el-col :span="24">
        <el-card style="background-color: rgba(255, 255, 255,1)" class="first-card">
          <div slot="header" class="total blog-info">
            <div class="nkname">
              <i class="el-icon-postcard m-r-5"></i>
              <span class="header">{{ resource.name }}</span>
            </div>
          </div>

          <div class="content" v-if="resource.type === '1'">
            <img ref="image_ref" :src="resource.url" width="100%" />
          </div>
          <div class="content" v-if="resource.type === '3'">
            <audio ref="audio_ref" controls width="100%">
              <source :src="resource.url" />
            </audio>
          </div>
          <div class="video" v-if="resource.type === '4'">
            <video ref="video_ref" :src="resource.url" controls="controls" :height="height" object-fill="fill" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: 'TrainingResourceView',
  data() {
    return {
      visible: false,
      appendToBody: false,
      resource: {
        name: undefined,
        type: undefined,
        url: undefined
      }
    }
  },
  computed: {
    height() {
      return screen.availHeight/3 + 'px'
    }
  },
  methods: {
    init(name, type, fileId) {
      this.$nextTick(() => {
        // 加载表单数据
        this.resource.name = name
        this.resource.type = type
        if (this.resource.type === '1') {
          this.resource.url = this.getImageSrc(fileId)
        } else if (this.resource.type === '3') {
          this.resource.url = this.getAudioSrc(fileId)
        } else if (this.resource.type === '4') {
          this.resource.url = this.getVideoSrc(fileId)
        }

        this.visible = true
      })
    },
    getImageSrc(value) {
      return this.$api.getImageSrc(value)
    },
    getAudioSrc(value) {
      return this.$api.getVideoSrc(value)
    },
    getVideoSrc(value) {
      return this.$api.getVideoSrc(value)
    },
    onClose() {
      this.visible = false
      this.resource = {
        name: undefined,
        type: undefined,
        url: undefined
      }
    }
  }
}
</script>

<style scoped>
  .blog-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }

  .content {
    text-align: left;
    font-size: 14px;
    flex-grow: 1;
    height: 100%;
    overflow: scroll;
  }

  .video {
    text-align: center;
    font-size: 14px;
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
  }
</style>
